<template>
  <div>
    <a-card size="small" title="对账单信息" style="margin: 0 auto;width: 60%">


      <a-form-model
        ref="ruleForm"
        :model="record"
        :rules="rules">
        <a-row>

          <a-col :span="24">
            <a-form-model-item label="结算单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="settlementCompany">
              <a-select v-model="record.settlementCompany" allowClear showSearch
                        placeholder="请选择结算单位">
                <a-select-option v-for="(item, key) in companyData" :key="key" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
          <a-form-model-item label="对账日期起止" :labelCol="labelCol" :wrapperCol="wrapperCol" >
            <a-range-picker
              style="width: 100%"
              :default-value="[moment(record.startTime, dateFormat), moment(record.endTime, dateFormat)]"
              :format="dateFormat"
            />
          </a-form-model-item>
          </a-col>
          <a-col :span="24">
          <a-form-model-item label="账单类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="billType">
            <a-radio-group v-model="record.billType">
              <a-radio value="ys">
                应收
              </a-radio>
              <a-radio value="yf">
                应付
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :wrapper-col="{ span: 14, offset: 6 }">
              <a-button type="primary" @click="goToSee">
                生成并预览
              </a-button>

            </a-form-model-item>
          </a-col>

        </a-row>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>

  import JDate from '@/components/jeecg/JDate'
  import { getAction, deleteAction, postAction } from '@/api/manage'
  import moment from 'moment';
  export default {
    components: {

      JDate,

    },
    name: 'monthlySettlement',
    data() {
      return {
        dateFormat: 'YYYY-MM-DD',
        form: this.$form.createForm(this),
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol2: {
          xs: { span: 23 },
          sm: { span:10 }
        },
        companyData: [],
        record: {},
        rules: {
          settlementCompany: [{ required: true, message: '请选择结算单位', trigger: 'change' }],
          startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
          endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
          billType: [{ required: true, message: '请选择账单类型', trigger: 'change' }],

        },
      }
    },
    created() {
      this.initDict()
      this.record.startTime = this.getFirstDayOfMonth()
      this.record.endTime = this.getLastDayOfMonth()
    },
    methods: {
      moment,
      initDict() {
        let param = { isLock: 0, pageSize: 99999 }
        getAction('/fee/list', param).then(res => {
          console.log(res.result.records)
          let feeData = []
          for (let i = 0; i < res.result.records.length; i++) {
            feeData.push({
              value: res.result.records[i].feeName,
              text: res.result.records[i].feeName
            })
          }
          this.feeNameData = feeData
        })
        getAction('/companydata/list', param).then(res => {
          console.log(res.result.records)
          let companyDataList = []
          for (let i = 0; i < res.result.records.length; i++) {
            companyDataList.push({
              value: res.result.records[i].companyName,
              text: res.result.records[i].companyName
            })
          }
          this.companyData = companyDataList
        })
      },
      goToSee(){
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            window.open('http://123.57.86.213:18080/RDP-SERVER/rdppage/main/1e34a5f6db2c5e1a03c579a00ad17198?settlementCompany=' + this.record.settlementCompany
              + '&startTime=' + this.record.startTime
              + '&endTime=' + this.record.endTime
              + '&billType=' + this.record.billType,
              'windowname',
              'top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')

          } else {

            return false;
          }
        });
      },
      timeFormat(date) {
             if (!date || typeof(date) === "string") {
                   this.error("参数异常，请检查...");
               }
             var y = date.getFullYear(); //年
           var m = date.getMonth() + 1; //月
          var d = date.getDate(); //日

         return y + "-" + m + "-" + d;
      },
      //获取当月第一天
     getFirstDayOfMonth () {
       const nowDate = new Date()
       nowDate.setDate(1);
        return this.timeFormat(nowDate);
     },
      //获取当月第一天
      getLastDayOfMonth () {
        const nowDate = new Date()
        var nowMonth = nowDate.getMonth(); //当前月
        nowDate.setMonth(nowMonth+1)
        nowDate.setDate(0);
        return this.timeFormat(nowDate);
      }
    }
  }
</script>

<style scoped>
</style>